import React from 'react';
import Table from '../../../components/Table'
import '../../../style/StudentsInfo.scss'
import { EditOutlined, DeleteOutlined, HomeOutlined, UserOutlined, SearchOutlined, } from '@ant-design/icons';
import { useState } from 'react';
import AddStu from '../../../components/AddStu'
import axios from 'axios'
import { useEffect } from 'react';
import { Skeleton, Button, Breadcrumb, Input, Select, Form, Modal, notification } from 'antd';
import { stu_del, stu_updata, stu_list, stu_searchlist } from '../../../utils/api3'
import {useStulist} from '../../../hooks/index'
function StudentsInfo(props) {
  // 定义按钮是否可用
  var [disabled, setDisabled] = useState(true)
  // 定义的表头
  var list = [
    {
      title: '学号', //表格列的名字(显示在表格头上)
      dataIndex: 'userid', //数据对应的属性名
      //key: 'name' //key是必须的,每一列不同.
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },

    {
      title: '电话',
      dataIndex: 'phone'
    },
    {
      title: '邮箱',
      dataIndex: 'email'
    },
    {
      title: '性别',
      dataIndex: 'sex'
    },
    {
      title: '生日',
      dataIndex: 'birthday'
    },
    {
      title: '账号状态',
      dataIndex: 'userstate',
      render: (_, { userstate }) => (
        <>
          {

            userstate == 1 ? <Button type='primary' size="small">启用</Button> : <Button size="small" type='primary' danger>禁用</Button>

          }
        </>
      )
    },
    {
      title: '健康状态',
      dataIndex: 'healthstate',
      render: (_, { healthstate }) => (
        <>
          {
            healthstate === 1 ? <Button type='primary' size="small">健康</Button> : <Button size="small" type='primary' danger>确诊</Button>
          }
        </>
      )
    },
    {
      title: '学院',
      dataIndex: 'college',
      render: (_, { college }) => (
        <>
          {
            <Button type='primary' size="small">{college}</Button>
          }
        </>
      )
    },
    {
      title: '宿舍号',
      dataIndex: 'address'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>
          <div className="changebox">
            <EditOutlined onClick={() => { edit(record) }} />
            <DeleteOutlined onClick={() => { del(record) }} />
          </div>
        </>
      ),
    },
  ];
  // 定义弹框
  const [visiable, setVisiable] = useState(false);
  const [form] = Form.useForm();
  const [id, setId] = useState()
  // 打开弹窗
  const open = () => {
    setVisiable(true);
  };
  //关闭弹窗
  const close = () => {
    setVisiable(false);
  };
  //点击确定提交表单
  const submit = () => {
    form.submit()
  }
  var [formlist1,] = useStulist()
  const updata=()=>{
    stu_list().then((res)=>{
      setFromlist(res.data)
    })
   }
  // 提交后获取表单数据，请求接口，重置表单并关闭
  const onSubmit = (values) => {
    var con = { ...values, id }
    // console.log("111", con)
    stu_updata(con).then((res) => {
      // console.log("更新了", res.data);
      // setDatalist(0)
      updata();
      notification.success({
        message: "更新成功",
        placement: 'top'
      })
    })
    form.resetFields();
    close()
  }
  // 定义表格数据
  var [formlist, setFromlist] = useState([])

  var [ckeckboxlist, setCkeckboxlist] = useState()
  console.log("复选框", ckeckboxlist)
  const edit = (record) => {
    setId(record.id)
    open()
    form.setFieldsValue(record)
    // console.log(record)
  }
  const del = (record) => {
    // console.log(record.id)
    var { id } = record
    console.log(id)
    stu_del(id).then((res) => {
      // console.log("删除了", res.data)
      axios.get('/studentlist').then((res) => {
        setFromlist(res.data)
        notification.success({
          message: "删除成功",
          placement: 'top'
        })
      })
    })
  }
  useEffect(() => {
    setFromlist(formlist1)
    // axios.get('/studentlist').then((res) => {
    //   //  console.log("555",res.data)
    //   setFromlist(res.data)
    // })
  }, [formlist1])
  // 分页数据
  const page = (page) => {
    // console.log("分页", page)
  }
  // 复选框数据
  const ckeckbox = (ckeckbox) => {
    setCkeckboxlist(ckeckbox)
    if (ckeckbox.length > 0) {
      setDisabled(false)
    } else {
      setDisabled(true)
    }
  }
  const onone = () => {
    if (ckeckboxlist) {
      // console.log("qqq", ckeckboxlist[0]);
      var id = ckeckboxlist[0]
      var values = { id, healthstate: 0, }
      stu_updata(values).then((res) => {
        // console.log("标记", res.data);
        updata();
        notification.success({
          message: "修改成功",
          placement: 'top'
        })
      })
    }

  }
  const ontwo = () => {
    var id = ckeckboxlist[0]
    var values = { id, healthstate: 1, }
    stu_updata(values).then((res) => {
      // console.log("标记", res.data);
      updata();
      notification.success({
        message: "修改成功",
        placement: 'top'
      })
    })
  }
  var [name, setName] = useState('')
  var homechange = (e) => {
    setName(e.target.value)
    console.log(e.target.value)
  }
  var stuonclick = () => {
    // get  /posts?查询字段_like=关键词  模糊查询, 返回数组
    stu_searchlist(name).then((res) => {
      // console.log('520',res.data);
      setFromlist(res.data)
      notification.success({
        message: "查询成功",
        placement: 'top'
      })
    })
  }
  return (
    <div className='studentsinfo'>
      <div className="bread">
        <Breadcrumb>
          <Breadcrumb.Item href="">
            <HomeOutlined />
          </Breadcrumb.Item>
          <Breadcrumb.Item href="">
            <UserOutlined />
            <span>学生管理</span>
          </Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="input">
        <Input placeholder="请输入学生姓名" value={name} onChange={homechange} />
        <Button size='small' type="primary" onClick={stuonclick}><SearchOutlined /></Button>
      </div>
      <div className="btn">
        {
          formlist.length ? <AddStu total={formlist.length} /> : <Skeleton active />
        }

        <Button size='small' type='primary' danger disabled={disabled} onClick={onone}>标记确诊</Button>
        <Button size='small' type='primary' disabled={disabled} onClick={ontwo}>标记正常</Button>
      </div>

      {
        formlist.length ? <Table list={list} formlist={formlist} total={formlist.length} page={page} ckeckbox={ckeckbox} /> : <Skeleton active />
      }


      <Modal
        wrapClassName="modal-wrap"
        okText="提交"
        cancelText="取消"
        cancelButtonProps={{ shape: 'round' }}
        okButtonProps={{ shape: 'round' }}
        width={600}
        visible={visiable}
        title="编辑学生信息"
        onCancel={close}
        onOk={submit}
      >
        <div className="form">
          <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} onFinish={onSubmit}>
            <Form.Item
              label="学号"
              name="userid"
              rules={[{ required: true, message: '请输入学号!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="姓名"
              name="name"
              rules={[{ required: true, message: '请输入姓名!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="电话"
              name="phone"
              rules={[{ required: true, message: '请输入电话!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="邮箱"
              name="email"
              rules={[{ required: true, message: '请输入邮箱!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="性别"
              name="sex"
              rules={[{ required: true, message: '请选择您的性别!' }]}
            >
              <Select>
                <Select.Option value={"女"}>女</Select.Option>
                <Select.Option value={"男"}>男</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="生日"
              name="birthday"
              rules={[{ required: true, message: '请输入生日!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="账号状态"
              name="userstate"
              rules={[{ required: true, message: '请选择您的账号状态!' }]}
            >
              <Select>
                <Select.Option value={0}>禁用</Select.Option>
                <Select.Option value={1}>启用</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="健康状态"
              name="healthstate"
              rules={[{ required: true, message: '请选择您的健康状态!' }]}
            >
              <Select>
                <Select.Option value={0}>确诊</Select.Option>
                <Select.Option value={1}>健康</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="宿舍"
              name="address"
              rules={[{ required: true, message: '请输入宿舍号!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="部门"
              name="college"
              rules={[{ required: true, message: '请选择您的学院!' }]}
            >
              <Select>
                <Select.Option value={"信工学院"}>信工学院</Select.Option>
                <Select.Option value={"商学院"}>商学院</Select.Option>
                <Select.Option value={"文学院"}>文学院</Select.Option>
                <Select.Option value={"师范学院"}>师范学院</Select.Option>
                <Select.Option value={"辣条学院"}>辣条学院</Select.Option>
              </Select>
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </div>
  );
}

export default StudentsInfo;